<template>
      <!-- 更新密码表单-->
      <div id="updateinformation">
          <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item>
            <h1 style="font-size:30px;color:#00B38A">拉勾</h1>
             </el-form-item>
            <el-form-item label="昵称" prop="userName" >
                <el-input v-model="ruleForm.userName" clearable size="small" type="text"></el-input>
            </el-form-item>
      <el-form-item label="头像上传">
      <el-upload
         ref="imgupload"
         :class="{styleA:file_list.length === 0,styleB:file_list.length === 1}"
         action="http://localhost:80/user/uploadimg"
         list-type="picture-card"
         :on-success="handleAvatarSuccess"
         :on-remove="handleRemove"
         :before-upload="beforeAvatarUpload"
         :limit='1'
         name="img" 
       >
   <!--      :on-preview="handPreview" -->
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="updateUserInfo('ruleForm')" class="button">确定</el-button>
                <el-button @click="resetForm()" class="button">重置</el-button>
              </el-form-item>
            </el-form>
        <p></p>
      </div>
</template>

<script>
  export default {
    data() {
      return {
      headers:{ 
        enctype: "multipart/form-data"
        },
        ruleForm: {
          userName: '',
          portrait: '',
        },
        imageUrl: '',
        file_list:[],
      };
    },
     created(){
    // 当刷新页面，组件创建成功之后，立刻检测本地储存中是否存在用户对象
    this.userDTO = JSON.parse( localStorage.getItem("user") );
  },
    methods: {
         handleAvatarSuccess(fileID) {
      //res这个参数自己打印出来一看便知，在此不做解释     
      console.log(fileID);
     //将后端发送的地址赋值到我们需要显示的img中的src动态绑定的参数中
      this.imageUrl = fileID;
	 //将图片地址绑定到我们的form表单数据中 后期存入数据库中     
      this.ruleForm.portrait = fileID;
       if(this.ruleForm.portrait !==''){
         console.log("已获取portrait");
         this.file_list.length=1;
       }
    },
     handleRemove(file) {
       this.$refs.imgupload.clearFiles();
        this.imageUrl='';
       this.file_list.length=0;

      },
        changeFile()
      {
         this.file_list.length=0;
      },
      beforeAvatarUpload(file) {
           const isJPG = file.type === "image/jpeg";
           const isPNG = file.type === "image/png";
           const isLt3M = file.size / 1024 / 1024 / 1024 < 3;
           if (!isJPG && !isPNG) {
             this.$message.error`在这里插入代码片`("上传头像图片只能是 JPG 格式或 png 格式!");
           }
           if (!isLt3M) {
             this.$message.error("上传头像图片大小不能超过 3MB!");
           }
           return isJPG && isLt3M;
         },
      handPreview(file)
      {
        let newfile=new FormData();
        newfile.append("img",file.raw);
        let config=
        {
          headers: {"Content-Type":"application/octet-stream;charset=utf-8"}
        };
        const instance=axios.create(
          {
            withCredentials:true
          });
          instance.post("http://localhost:80/user/uploadimg",file,config)
          .then(response=>
          {
               alert("0000000000000")
          });
          console.log(file);
      },
      updateUserInfo(ruleForm)
      {
       return this.axios
      .get("http://localhost:80/user/updateUserInfo", {
        params:{
          userid: this.userDTO.content.id,
          portrait: this.ruleForm.portrait,
          name: this.ruleForm.userName,
        }
      })
      .then( (result)=>{
        console.log( result );
        this.userDTO = result.data; // 保存返回数据中的用户对象信息
        localStorage.setItem("user", JSON.stringify(this.userDTO)); // 将登录成功的对象信息保存到本地储存中
         if(this.userDTO.state===200)
        {
              this.$refs.ruleForm.resetFields();
              this.$refs.imgupload.clearFiles();
            　this.$message.success('修改成功') 
              this.imageUrl='';
              this.file_list.length=0;
     
        }
      
      } )
      .catch( (error)=>{
        this.$message.error("修改用户信息失败！");
      });
      },
      resetForm()
      {
          this.$refs.ruleForm.resetFields();
          this.$refs.imgupload.clearFiles();
          this.imageUrl='';
          this.file_list.length=0;
        
      }
    }
  };
</script>

<style>
   .styleA .el-upload--picture-card{
        width:150px;
        height:110px;
        line-height:110px;
    }
    .styleB .el-upload--picture-card{
     display:none;   
    }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>